<template>
  <div>
    <viewer :images="imgUrlList">
      <li v-for="(value,index) in imgUrlList" :key="index">
        <div class="image">
          <img :src="value.path" alt="图片">
        </div>
        <span v-cloak>{{value.title}}</span>
      </li>
    </viewer>
    <div class="divClass">tttt</div>


    <div id="app">
      <div v-html="link" ref="mydiv"></div> <!-- notice 'ref' -->
    </div>

    <div style="position: relative;z-index: 9">
      <el-button @click="preview">预览</el-button>
    </div>


    <span>删除</span>

  </div>
</template>

<script>
import $ from "jquery"
export default {
  name: "vViewer",
  data(){
    return{
      imgUrlList: [
        {path:require('@/assets/logo.png'),title:"第一张图片"},
      ],
      link: '<a href="#">click me</a>' ,
      imgs:[
        'https://d3060o62o2gp0l.cloudfront.net/pic/韩语考试/1.jpg',
        'https://d3060o62o2gp0l.cloudfront.net/pic/韩语考试/2.jpg'
      ]
    }
  },
  created() {
    console.log("$",$(".divClass").html())
  },
  mounted(){
    $(".divClass").on('click',function (){
      alert("click")
    })


    this.$refs['mydiv'].firstChild.addEventListener('click', function(event) {
      event.preventDefault();
      console.log('clicked: ', event.target);


    })


  },
  methods:{
      preview(){
        this.$viewerApi({
          images: this.imgs,
        });
      }
  }
}
</script>

<style scoped>
span[title~=删除]{color: red}
</style>